<template>
	<div class="paper-wrap">
		<n-card>
			<!-- 学生信息 -->
			<div class="paper-title">
				<!-- 实验标题 -->
				<h2>压电陶瓷特性研究</h2>
				<div class="stu-info">
					<div class="stu-info-item">
						<span>学号：</span>
						<span>{{ sid }}</span>
					</div>
					<div class="stu-info-item">
						<span>姓名：</span>
						<span>{{ name }}</span>
					</div>
					<div class="stu-info-item">
						<!-- <span>班级：</span>
						<span>{{cid}}</span> -->
					</div>
				</div>
			</div>
			<!-- 实验的基本信息 -->
			<n-divider title-placement="left"> <h2>一、实验目的</h2></n-divider>
			<div class="paper-purpose">
				<ol>
					<li>1.掌握在光学实验平台上搭建迈克尔逊干涉光路的方法</li>
					<li>2.利用光的干涉特性测量压电陶瓷的压电常量。</li>
					<li>3.了解压电陶瓷在受迫振动下的响应特性。</li>
				</ol>
			</div>
			<n-divider title-placement="left"> <h2>二、实验仪器</h2></n-divider>
			<div class="paper-instrument">
				<p class="instruments">
					本实验使用的仪器有光学隔振平台He-Ne激光器(波长 632.8
					nm)、反射镜分束镜、带孔白屏、二维可调扩束镜、驱动电源(调节范围
					0~300 V)、压电陶瓷、光电探头、示波器、磁性开关基座等。</p
				>
			</div>
			<n-divider title-placement="left"> <h2>三、实验原理</h2></n-divider>
			<div class="paper-principle">
				<p class="principles"> 具体内容请参照实验指导书进行学习 </p>
			</div>

			<n-divider title-placement="left">
				<h2>四、数据记录与处理</h2></n-divider
			>
			<div class="paper-data">
				<!-- 第一个表单 -->
				<h3>(一)压电常量的测量及特性研究 </h3>
				<h4 style="text-align: center"
					>压电陶瓷驱动电压与干涉条纹移动的关系</h4
				>
				<table
					border="1"
					style="
						width: 100%;
						border-collapse: collapse;
						border: 1px solid #000;
					"
				>
					<tr style="background: rgb(0, 0, 0, 0.1)">
						<td colspan="2">移过参考点的条纹数n</td>
						<td>参考点</td>
						<td>1</td>
						<td>2</td>
						<td>3</td>
						<td>4</td>
						<td>5</td>
					</tr>
					<tr>
						<th rowspan="2">驱动电压/V</th>

						<td> Un </td>
						<td>U0</td>
						<td>U1</td>
						<td>U2</td>
						<td>U3</td>
						<td>U4</td>
						<td>U5</td>
					</tr>
					<tr>
						<td> 变化Un </td>
						<td style="background-color: #ccc"></td>
						<td>变化U1</td>
						<td>变化U2</td>
						<td>变化U3</td>
						<td>变化U4</td>
						<td>变化U5</td>
					</tr>
					<tr>
						<th rowspan="2">第一组</th>

						<td> Un </td>
						<td
							><el-input
								type="text"
								v-model="model[5].value"
								@blur="getTime(5)"
						/></td>
						<td
							><el-input
								type="text"
								v-model="model[5].value"
								@blur="getTime(5)"
						/></td>
						<td
							><el-input
								type="text"
								v-model="model[5].value"
								@blur="getTime(5)"
						/></td>
						<td
							><el-input
								type="text"
								v-model="model[5].value"
								@blur="getTime(5)"
						/></td>
						<td
							><el-input
								type="text"
								v-model="model[5].value"
								@blur="getTime(5)"
						/></td>
						<td
							><el-input
								type="text"
								v-model="model[5].value"
								@blur="getTime(5)"
						/></td>
					</tr>
					<tr>
						<td> 变化Un </td>
						<td style="background-color: #ccc"></td>
						<td
							><el-input
								type="text"
								v-model="model[5].value"
								@blur="getTime(5)"
						/></td>
						<td
							><el-input
								type="text"
								v-model="model[5].value"
								@blur="getTime(5)"
						/></td>
						<td
							><el-input
								type="text"
								v-model="model[5].value"
								@blur="getTime(5)"
						/></td>
						<td
							><el-input
								type="text"
								v-model="model[5].value"
								@blur="getTime(5)"
						/></td>
						<td
							><el-input
								type="text"
								v-model="model[5].value"
								@blur="getTime(5)"
						/></td>
					</tr>
					<tr>
						<th rowspan="2">第二组</th>
						<td> Un </td>
						<td
							><el-input
								type="text"
								v-model="model[5].value"
								@blur="getTime(5)"
						/></td>
						<td
							><el-input
								type="text"
								v-model="model[5].value"
								@blur="getTime(5)"
						/></td>
						<td
							><el-input
								type="text"
								v-model="model[5].value"
								@blur="getTime(5)"
						/></td>
						<td
							><el-input
								type="text"
								v-model="model[5].value"
								@blur="getTime(5)"
						/></td>
						<td
							><el-input
								type="text"
								v-model="model[5].value"
								@blur="getTime(5)"
						/></td>
						<td
							><el-input
								type="text"
								v-model="model[5].value"
								@blur="getTime(5)"
						/></td>
					</tr>
					<tr>
						<td> 变化Un </td>
						<td style="background-color: #ccc"></td>
						<td
							><el-input
								type="text"
								v-model="model[5].value"
								@blur="getTime(5)"
						/></td>
						<td
							><el-input
								type="text"
								v-model="model[5].value"
								@blur="getTime(5)"
						/></td>
						<td
							><el-input
								type="text"
								v-model="model[5].value"
								@blur="getTime(5)"
						/></td>
						<td
							><el-input
								type="text"
								v-model="model[5].value"
								@blur="getTime(5)"
						/></td>
						<td
							><el-input
								type="text"
								v-model="model[5].value"
								@blur="getTime(5)"
						/></td>
					</tr>
					<tr>
						<th rowspan="2">第三组</th>
						<td> Un </td>
						<td
							><el-input
								type="text"
								v-model="model[5].value"
								@blur="getTime(5)"
						/></td>
						<td
							><el-input
								type="text"
								v-model="model[5].value"
								@blur="getTime(5)"
						/></td>
						<td
							><el-input
								type="text"
								v-model="model[5].value"
								@blur="getTime(5)"
						/></td>
						<td
							><el-input
								type="text"
								v-model="model[5].value"
								@blur="getTime(5)"
						/></td>
						<td
							><el-input
								type="text"
								v-model="model[5].value"
								@blur="getTime(5)"
						/></td>
						<td
							><el-input
								type="text"
								v-model="model[5].value"
								@blur="getTime(5)"
						/></td>
					</tr>
					<tr>
						<td> 变化Un </td>
						<td style="background-color: #ccc"></td>
						<td
							><el-input
								type="text"
								v-model="model[5].value"
								@blur="getTime(5)"
						/></td>
						<td
							><el-input
								type="text"
								v-model="model[5].value"
								@blur="getTime(5)"
						/></td>
						<td
							><el-input
								type="text"
								v-model="model[5].value"
								@blur="getTime(5)"
						/></td>
						<td
							><el-input
								type="text"
								v-model="model[5].value"
								@blur="getTime(5)"
						/></td>
						<td
							><el-input
								type="text"
								v-model="model[5].value"
								@blur="getTime(5)"
						/></td>
					</tr>
					<tr>
						<td colspan="3">u变化的平均值Un/V</td>
						<td
							><el-input
								type="text"
								v-model="model[5].value"
								@blur="getTime(5)"
						/></td>
						<td
							><el-input
								type="text"
								v-model="model[5].value"
								@blur="getTime(5)"
						/></td>
						<td
							><el-input
								type="text"
								v-model="model[5].value"
								@blur="getTime(5)"
						/></td>
						<td
							><el-input
								type="text"
								v-model="model[5].value"
								@blur="getTime(5)"
						/></td>
						<td
							><el-input
								type="text"
								v-model="model[5].value"
								@blur="getTime(5)"
						/></td>
					</tr>
				</table>

				<el-form
					:form="model"
					style="font-size: 19px"
					label-width="160px"
					label-position="left"
				>
					<el-form-item
						label="根据表中的数据做线性拟合，得到b="
						style="width: 35%"
					>
						<el-input
							v-model="model[0].value"
							@blur="getTime(0)"
						></el-input>
					</el-form-item>
					<el-form-item label="a=" style="width: 35%">
						<el-input
							v-model="model[1].value"
							@blur="getTime(1)"
						></el-input>
					</el-form-item>
					<div style="margin-bottom: 20px; font-size: 17px"
						>将r=<el-input
							v-model="model[0].value"
							@blur="getTime(0)"
							style="width: 70px"
						></el-input
						>nm、 L=<el-input
							v-model="model[0].value"
							@blur="getTime(0)"
							style="width: 70px"
						></el-input
						>m 代人得压电常量=
						<el-input
							v-model="model[0].value"
							@blur="getTime(0)"
							style="width: 70px"
						></el-input
						>nm*V^-1*m^-1</div
					>
				</el-form>
			</div>
			<!-- 第五个表单 -->
			<n-divider title-placement="left"><h2>五、实验分析</h2></n-divider>
			<div class="paper-analyze">
				<div style="margin-bottom: 10px; font-size: 17px"
					>1.在迈克尔逊干涉光路中，分束镜的作用是</div
				>
				<el-input
					type="textarea"
					v-model="model[45].value"
					style="height: 100px"
					@blur="getTime(45)"
				/>
				<div style="margin-bottom: 10px; font-size: 17px"
					>2.分析压电常量测量中误差产生的原因</div
				>
				<el-input
					type="textarea"
					v-model="model[46].value"
					style="height: 100px"
					@blur="getTime(46)"
				/>
			</div>
			<div class="btn-group">
				<n-button type="info" @click="router.back()">
					保存并退出
				</n-button>
				<router-link to="/">
					<n-button type="success" @click="apply"> 提交 </n-button>
				</router-link>
			</div>
		</n-card>
	</div>
</template>
<script setup lang="ts">
// 引入路由
//@ts-nocheck
import { useRoute } from 'vue-router'
import { changeState, getDetailEx } from '@/api/request'
import { useGlobalStore } from '@/store/GlobalStore/index'
const store = useGlobalStore()
const route = useRoute()
const router = useRouter()
const name = store.userInfo.username
const rid = ref('')
const tid = ref('')
const sid = route.query.sid
const cid = store.userInfo.cid
// import router from '~/src/router'

const model = ref([
	{ kid: 'k1', value: '', timeStamp: '' },
	{ kid: 'k2', value: '', timeStamp: '' },
	{ kid: 'k3', value: '', timeStamp: '' },
	{ kid: 'k4', value: '', timeStamp: '' },
	{ kid: 'k5', value: '', timeStamp: '' },
	{ kid: 'k6_1', value: '', timeStamp: '' },
	{ kid: 'k6_2', value: '', timeStamp: '' },
	{ kid: 'k6_3', value: '', timeStamp: '' },
	{ kid: 'k6_4', value: '', timeStamp: '' },
	{ kid: 'k7_1', value: '', timeStamp: '' },
	{ kid: 'k7_2', value: '', timeStamp: '' },
	{ kid: 'k7_3', value: '', timeStamp: '' },
	{ kid: 'k7_4', value: '', timeStamp: '' },
	{ kid: 'k8_1', value: '', timeStamp: '' },
	{ kid: 'k8_2', value: '', timeStamp: '' },
	{ kid: 'k8_3', value: '', timeStamp: '' },
	{ kid: 'k8_4', value: '', timeStamp: '' },
	{ kid: 'k9_1', value: '', timeStamp: '' },
	{ kid: 'k9_2', value: '', timeStamp: '' },
	{ kid: 'k9_3', value: '', timeStamp: '' },
	{ kid: 'k9_4', value: '', timeStamp: '' },
	{ kid: 'k10_1', value: '', timeStamp: '' },
	{ kid: 'k10_2', value: '', timeStamp: '' },
	{ kid: 'k10_3', value: '', timeStamp: '' },
	{ kid: 'k10_4', value: '', timeStamp: '' },
	{ kid: 'k11_1', value: '', timeStamp: '' },
	{ kid: 'k11_2', value: '', timeStamp: '' },
	{ kid: 'k11_3', value: '', timeStamp: '' },
	{ kid: 'k11_4', value: '', timeStamp: '' },
	{ kid: 'k11_5', value: '', timeStamp: '' },
	{ kid: 'k11_6', value: '', timeStamp: '' },
	{ kid: 'k12_1', value: '', timeStamp: '' },
	{ kid: 'k12_2', value: '', timeStamp: '' },
	{ kid: 'k12_3', value: '', timeStamp: '' },
	{ kid: 'k12_4', value: '', timeStamp: '' },
	{ kid: 'k12_5', value: '', timeStamp: '' },
	{ kid: 'k13_1', value: '', timeStamp: '' },
	{ kid: 'k13_2', value: '', timeStamp: '' },
	{ kid: 'k13_3', value: '', timeStamp: '' },
	{ kid: 'k13_4', value: '', timeStamp: '' },
	{ kid: 'k13_5', value: '', timeStamp: '' },
	{ kid: 'k14', value: '', timeStamp: '' },
	{ kid: 'k15', value: '', timeStamp: '' },
	{ kid: 'k16', value: '', timeStamp: '' },
	{ kid: 'k17', value: '', timeStamp: '' },
	{ kid: 'k18', value: '', timeStamp: '' },
	{ kid: 'k19', value: '', timeStamp: '' },
	// ["kid":"value", "t"+"kid":"timeS",]
])
const fn = () => {
	console.log('ttttttttttest')
}
const debunce = (fn) => {
	let timer = null
	return function () {
		if (timer) {
			clearTimeout(timer)
		}
	}
	timer = setTimeout(function () {
		fn()
	}, 1000)
} //防抖
const jwtToken = localStorage.getItem('jwtToken')
//const name = localStorage.getItem('name')

const ws = new WebSocket(
	`ws://210.44.37.172:8082/message?id=${sid}&role=student`
)
ws.onopen = function (e) {
	console.log('连接成功')
	// console.log('断开之前')
	// setTimeout(() => {
	// 	ws.close()
	// }, 3000)
	// console.log('断开了')
	// ws.send(
	// 	// '{"rid":"2002","tid":"3000","kid":"3000","value":"3.33","timeStamp":"3.2.3"}'
	// 	`{"role":"student","sourceId":"${sid}","eid":"3","rid":"${rid.value}","destId":"${tid.value}","kid":"k3","value":"3.33","timeStamp":"3.2.3"}`
	// )
}
ws.onmessage = function (e) {
	console.log(e.data, '接收返回的消息')
}
ws.onclose = function () {
	console.log('连接关闭')
}
ws.onerror = function () {
	console.log('连接出错')
}

onMounted(() => {
	console.log('组件挂载')
	rid.value = route.query.id
	tid.value = route.query.tid
	console.log('sid', sid, 'rid', rid.value, 'tid', tid.value)
	console.log(store.userInfo.username, 'store')

	// 拿到保存的实验数据
	getDetailEx(jwtToken, 1, rid.value).then((res) => {
		console.log(res.data.data[0], 'socket数据')
		model.value.forEach((element) => {
			var obj = element
			var kid = obj.kid
			if (res.data.data[0].hasOwnProperty(kid)) {
				obj.value = res.data.data[0][kid]
				obj.timeStamp = res.data.data[0]['t' + kid]
			}
		})
	})
})
// 填每一个空的时间
const fillTime = ref([])
// 失去焦点时触发事件记录时间
const getTime = function (index) {
	model.value[index].timeStamp = new Date().toLocaleString()
	// 处理model数组的数据
	model.value = model.value.map((item) => ({
		role: 'student',
		sourceId: sid,
		rid: rid.value,
		destId: tid.value,
		eid: '1',
		kid: item.kid,
		// 返回这个对象中第一个属性的value值
		value: item.value,
		timeStamp: item.timeStamp,
	}))
	console.log('输出的', model.value)
	//每次点击一个空，就会将状态更改为1，已开始
	changeState(jwtToken, rid.value, 1).then((res) => {
		console.log('已开始', res)
	})
	//	debunce(wssend)

	const wssend = ws.send(
		// '{"rid":"2002","tid":"3000","kid":"3000","value":"3.33","timeStamp":"666666666"}'
		`${JSON.stringify(model.value[index])}`
	)
	console.log(model.value[index], '填的空')
}
// 提交
const apply = function () {
	// console.log('提交')
	// storage()
	model.value = model.value.map((item) => ({
		rid: rid.value,
		tid: tid.value,
		kid: Object.keys(item)[0],
		// 返回这个对象中第一个属性的value值
		value: item[Object.keys(item)[0]],

		timeStamp: item.timeStamp,
	}))
	//点击提交，就会将状态更改为2，已完成
	changeState(jwtToken, rid.value, 2).then((res) => {
		console.log('已完成', res)
	})
	console.log(model.value, '提交成功')
	ElMessage.success('提交成功')
}
</script>

<style lang="less" scoped>
.paper-title {
	.stu-info {
		display: flex;
		align-items: center;
		.stu-info-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 10px;
		}
	}
}
.form1 {
	.form-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 10px;
		.input-group {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			.input {
				width: 100%;
			}
		}
	}
}
table {
	margin: 10px;
	tr {
		td {
			text-align: center;
			padding: 10px;
			input {
				width: 100%;
				height: 100%;
				border: none;
				outline: none;
				text-align: center;
				box-sizing: border-box;
				&:focus {
					border-radius: 5px;
					border: 1px solid #000;
				}
			}
		}
	}
}
.btn-group {
	// 右下角
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	margin: 10px;
	.n-button {
		margin-left: 10px;
	}
}
</style>
